<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'黑名单车辆记录'"/>
        <div class="dy-table">
          <table class="pd-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>车辆</th>
                <th>服务区</th>
                <th>分区</th>
                <th>进入时间</th>
                <th>停留时间</th>

              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableDatas">
                <td>{{item.id}}</td>
                <td>{{item.carNo}}</td>
                <td>{{item.server}}</td>
                <td>{{item.area}}</td>
                <td>{{item.inDate}}</td>
                <td>{{item.outDate}}</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="6">
                  <div class="pagination-page">
                    <div class="page-first" @click="toPage(0)"></div>
                    <div class="page-last" @click="toPage(tableConfit.pageNo - 2)"></div>
                    <div class="page-c">
                      <div v-for="(row,index) in pageBottomDatas" :class="{'page-c-item':true,'cur':(row + 1)===tableConfit.pageNo}" @click="toPage(row)">
                        {{ row + 1 }}
                      </div>
                    </div>
                    <div class="page-next" @click="toPage(tableConfit.pageNo)"></div>
                    <div class="page-end" @click="toPage(tableConfit.total - 1)"></div>
                  </div>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
      <div class="pd_abItems-contain">
        <div class="block_select_contain">
          <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
        </div>
        <div class="pd_abItems-main">
          <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
        </div>
        
        <el-date-picker
            v-model="today"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <div class="pd-abItem-search">
          <button class="pd-abItem-search-btn" @click="search">查询</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";

  const emit = defineEmits(['closeChild']);
  const closeCurrent = function (){
    emit('closeChild')
  }

  //设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

const curServer = ref("")
//选中服务区
const serverHandleChange = (selectItem) => {
  // console.log(selectItem);
  curServer.value = selectItem ?? ['河北高速燕赵驿行集团有限公司',''];
  
}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}

  const areacode = ref(null)
  const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
  const abItemsClick = function (item){
    abItems.value.forEach((res,i)=>{
      res.clazz = res.title === item.title?'selected':"";
    })
    if(item.title === '综合'){
      areacode.value = null
    }
    else if(item.title === '东(南)'){
      areacode.value = "01"
    }
    else if(item.title === '西(北)'){
      areacode.value = "02"
    }
  }

  function formatDate(date) {
    function padZero(num) {
      return num < 10 ? '0' + num : num;
    }
    var year = date.getFullYear();
    var month = padZero(date.getMonth() + 1);
    var day = padZero(date.getDate());
    return `${year}-${month}-${day}`;
  }

  const today = ref([new Date(),new Date()]);
  const search = function (){
    console.log(today);
    //分区切换刷新数据
    loadTable();
  }


  const tableDatas = ref([]);
  const tableConfit = ref({pageNo:1,pageSize:10,total:100});
  const pageBottomDatas = ref([]);

  async function loadTable(){
    tableDatas.value =
    [
      {id:1,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
      {id:2,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
      {id:3,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
      {id:4,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
      {id:5,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
      {id:6,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'2燕赵服务区3'},
      {id:7,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
      {id:8,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
      {id:9,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
      {id:10,carNo:'粤E12345',area:'东(南)',inDate:'2023-01-01 12:00',outDate:'2023-01-01 12:00',server:'燕赵服务区'},
    ]
    tableDatas.value = []
    let startdate,enddate
    //手动输入
    if(today.value[0].$d){
      startdate = formatDate(today.value[0].$d)
      enddate = formatDate(today.value[1].$d)
    }else{
      startdate = formatDate(today.value[0])
      enddate = formatDate(today.value[1])
    }
    const params = {
      page: tableConfit.value.pageNo,
      limit: tableConfit.value.pageSize,
      compid:curServer.value[1],
      areacode: areacode.value,
      startdate: startdate,
      enddate: enddate
    }
    const res = await ajaxRequest('post', 'getHmd', params)
    if (res.data) {
      if(res.data.total){
        //总页数
        tableConfit.value.total = calculateTotalPages(res.data.total,tableConfit.value.pageSize)
      }
      res.data.rows.forEach((item,i)=>{
        let row = {id:(i+1),carNo:item.platenumber,area:item.areaname,inDate:item.jrsj,outDate:item.tlsj,server:item.compname}
        tableDatas.value.push(row)
      })
    }
    pageBottomDatas.value = [];
    let startPage = (tableConfit.value.pageNo < 10)?0:tableConfit.value.pageNo - 5;
    let entPage = startPage + tableConfit.value.pageSize;
    console.log(startPage,entPage)
    if (entPage > tableConfit.value.total) entPage = tableConfit.value.total;
    for (let m = startPage;m < entPage;m++){
      pageBottomDatas.value.push(m);
    }
  }

  const toPage = function (curPage){
    if (curPage < 0) curPage = 0
    else if (curPage > tableConfit.value.total) curPage = tableConfit.value.total
    tableConfit.value.pageNo = curPage + 1;
    loadTable();
  }

  onMounted(()=>{
    loadTable();
    getFwqxx()
  });


//计算总页数
function calculateTotalPages(totalItems, itemsPerPage) {
    return Math.ceil(totalItems / itemsPerPage);
}
</script>

<style scoped>
.dy-panel{
  position: fixed;
  top: 10vh;
  width: 100%;
  .dy-panel-main{
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    padding-bottom: 2.5vh;
    position: relative;
    .dy-panel-header{
      height: 3vh;
      .dy-panel-close{
        position: absolute;
        height: 2.6vh;
        width: 2.6vh;
        background-image: url("../../../assets/img/public/关闭.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 1vh;
        top: 2vh;
        cursor: pointer;
      }
    }
    .dy-panel-content{
      display: flex;
      padding: 2vh;
      flex-wrap: wrap;
    }
  }
}
.pd_abItems-contain{
  display: flex;
  justify-content: center;
  margin-top: 1vh;
  .pd_abItems-main{
    display: flex;
    border: 1px solid #FFFFFF;
    margin-right: 2vh;
    .pd_abItem-item{
      padding: 0.5vh 1.2vh;
      border-right: 1px solid #FFFFFF;
      cursor: pointer;
      font-size: 1.4vh;
    }
    .selected{
      background: #35CB9C;
      border: 1px solid #35CB9C;
    }
  }
  .pd-abItem-search{
    margin-left: 1vh;
    .pd-abItem-search-btn{
      border: none;
      background: #35CB9C;
      padding: 0.5vh 1.2vh;
      color: #FFFFFF;
      cursor: pointer;
    }
  }
}
.dy-table{
  width: 100%;
  padding-top: 1.4vh;
}
.pd-table{
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  thead{
    tr{
      background: #1D4F59;
      font-size: 1.6vh;
      th{
        padding: 0.8vh 0;
      }
    }
  }
  tbody td{
    border: 1px solid #1D4F59 ;
    padding: 0.8vh 0;
    font-size: 1.4vh;
  }
}
.pagination-page{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1vh;
  padding: 1vh;
  .cur{
    border: 1px solid #FFFFFF;
    border-radius: 0.5vh;
  }
  .page-first{
    background: url("../../../assets/img/pageheader/第一页.png") no-repeat;
    width: 18px;
    height: 20px;
    cursor: pointer;
  }
  .page-last{
    background: url("../../../assets/img/pageheader/上一页.png") no-repeat;
    width: 18px;
    height: 20px;
    margin-left: 1vh;
    cursor: pointer;
  }
  .page-c{
    display: flex;
    .page-c-item{
      margin-left: 1vh;
      cursor: pointer;
      padding: 0 0.4vh;
    }
  }
  .page-next{
    background: url("../../../assets/img/pageheader/下一页.png") no-repeat;
    width: 18px;
    height: 20px;
    margin-left: 1vh;
    cursor: pointer;
  }
  .page-end{
    background: url("../../../assets/img/pageheader/最后一页.png") no-repeat;
    width: 18px;
    height: 20px;
    margin-left: 1vh;
    cursor: pointer;
  }
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 160px;
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>